<template>
  <div class="payFail">
    <el-dialog custom-class="errorTip" title="支付失败" :modal-append-to-body="false" :visible.sync="payFailObj.show" width="440px" top="15vh">
      <p>对不起，以下商品在您支付的瞬间被别人抢走啦 请回去重新筛选商品</p>
      <ul class="errorList">
        <li v-for="index in 5" :key="index">
          <img src="../../../assets/images/head.jpg" alt="商品主图">
          <p>商品名称商品名称商品名称商品名称商品名称</p>
        </li>
      </ul>
      <div class="footer">
        <b class="button-w" @click="reCheck">重新选择</b>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'payFail',
  data () {
    return {
      payFailObj: {
        show: true
      }
    }
  },
  methods: {
    reCheck () {
      this.payFailObj.show = false
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/index.styl'
.payFail
  .errorTip
    padding 40px
    p
      text-align center
      fongSize($fontSize, 26px, $fontColor)
    .errorList
      display flex
      flex-wrap wrap
      margin-top 32px
      li
        width 50%
        display flex
        img
          width 60px
          height 60px
          margin-right 12px
        p
          flex 1
          align-self center
          margin-right 20px
          text-overflow ellipsis
          overflow hidden
          display box
          display -webkit-box
          -webkit-line-clamp 2
          -webkit-box-orient vertical
    .footer
      text-align center
      margin-top 36px
</style>
